<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
</head>

<body>
    <form action="">
        <div>
            <div class="head">
                <a href="main.html">
                    <img src="image/登录/1.png" alt="">
                </a>
            </div>
            <div class="login">华为账号登录</div>
            <div class="left">
                <div class="code2d">
                    <img src="image/登录/2.png" alt="">
                </div>
                <div class="if">
                    若您使用华为手机，请进入“设置”>“华为帐号”扫码登录。
                </div>
                <em></em>
            </div>
            <em class="em"></em>
            <span class="span"></span>
            <div class="right">
                <table>
                    <tr>
                        <td colspan="3">
                            <div class="input-name">
                                <input type="text" name="user" title="Search" class="name account-login" id="name"
                                    value="手机号 / 邮件地址 / 账号名" onkeydown="if (event.keyCode==20) {}"
                                    onblur="if(this.value=='')value='手机号 / 邮件地址 / 账号名';"
                                    onfocus="if(this.value=='手机号 / 邮件地址 / 账号名')value='';" value="手机号 / 邮件地址 / 账号名" />
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <div class="input-name">
                                <input type="password" placeholder="密码" name="password" title="Search"
                                    class="name password" id="name" value="" onkeydown="if (event.keyCode==20) {}"
                                    onblur="if(this.placeholder=='')placeholder='密码';"
                                    onfocus="if(this.placeholder=='密码')placeholder='';" placeholder="密码" />
                                <!-- <i class="fa fa-eye fa-2x i1" aria-hidden="true"></i> -->
                                <!-- <i class="fa fa-eye-slash fa-2x i2" aria-hidden="true"></i> -->
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3" class="dx"><a href="">短信验证码登录</a></td>
                    </tr>
                    <tr>
                        <td colspan="3" class="button"><button onclick="login();">登 录</button></td>
                    </tr>
                    <tr>
                        <td class="zc zc-1"><a href="reg.html">注册<em></em></a></td>
                        <td class="zc zc-2"><a href="">忘记密码<em></em></a></td>
                        <td class="zc zc-3"><a href="">遇到问题</a></td>
                    </tr>
                    <tr>
                        <td><a href=""></a></td>
                        <td><a href=""></a></td>
                        <td><a href=""></a></td>
                    </tr>
                </table>
            </div>
            <div class="foot" onclick="addAllGoodsInCart();">
                <div>
                    <br><br>华为帐号用户协议&nbsp;&nbsp; | &nbsp;&nbsp;关于华为帐号与隐私的声明&nbsp;&nbsp; | &nbsp;&nbsp;常见问题&nbsp;&nbsp; |
                    &nbsp;&nbsp;Cookies
                </div>
                <div>
                    华为帐号 版权所有 © 2011-2021
                </div>
            </div>
        </div>
    </form>
</body>

</html>

<style>
    .head {
        position: absolute;
        top: 0;
        left: 0;
        width: 1596px;
        height: 50px;
        background-color: #0000000D;
    }

    .head img {
        position: absolute;
        left: 190px;
        top: 5px;
        width: 220px;
        height: 40px;
    }

    .foot {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 1596px;
        height: 110px;
        background-color: #0000000D;
    }

    .login {
        position: absolute;
        left: 588px;
        top: 150px;
        width: 400px;
        height: 200px;
        /* border: 1px solid rebeccapurple; */
        text-align: center;
        font-size: 30px;
    }

    .left {
        position: absolute;
        left: 290px;
        top: 190px;
        width: 500px;
        height: 400px;
        /* border: 1px solid rebeccapurple; */
        text-align: center;
        line-height: 400px;

        text-align: center;
        font-size: 10px;
        color: #ccc;

        overflow: visible;
    }

    .code2d {
        position: absolute;
        left: 160px;
        top: 77px;
        width: 200px;
        height: 200px;
        border-radius: 10px 10px 10px 10px;
        background-color: #0000000D;
    }

    .if {
        position: absolute;
        left: 16px;
        top: 310px;
        width: 500px;
        height: 20px;
        /* text-align: center; */
        font-size: 12px;
        font-family: Arial, Helvetica, sans-serif;
        color: #838383;
        line-height: 20px;
        /* border: 1px solid rebeccapurple; */
    }

    .code2d img {
        position: absolute;
        top: 20px;
        left: 20px;
        text-align: center;
        /* line-height: -50px; */
        width: 160px;
        height: 160px;
    }

    .right {
        position: absolute;
        left: 800px;
        top: 190px;
        width: 500px;
        height: 500px;
        /* border: 1px solid rebeccapurple; */
        text-align: center;
        line-height: 400px;

        text-align: center;
        font-size: 10px;
        color: #ccc;

    }

    .right>table {
        /* background-color: rebeccapurple; */
        text-align: center;
        line-height: 50px;
        position: absolute;
        top: 50px;
        left: 50px;
        height: 100px;
        margin-top: 0;
        padding-top: 0;
    }

    .input-name {
        width: 360px;
        height: 50px;
        border-radius: 10px;
        margin-top: 24px;
        background-color: #eeeeee;
        border: 1px solid #eeeeee;
        /* position: absolute; */
    }

    .i1 {
        position: absolute;
        right: 22px;
        bottom: 202px;
        color: black;
        opacity: 1;
    }

    .i2 {
        position: absolute;
        right: 22px;
        bottom: 202px;
        color: black;
        opacity: 0;
    }


    .i1:hover {
        opacity: 0;
        cursor: pointer;
        color: #838383;
    }

    .i2:hover {
        opacity: 1;
        cursor: pointer;
        color: #838383;
    }

    .input-name:hover {
        border: 1px solid #007DFF;
    }

    .name {
        height: 45px;
        border-style: none;
        outline-style: none;
        font-size: 15px;
        font-family: Arial, Helvetica, sans-serif;
        color: #727272;
        width: 320px;
        background-color: #eeeeee;
    }

    .dx {
        text-align: left;
        font-size: 16px;
    }

    .dx a {
        color: #007DFF;
        text-decoration: none;
        font-family: Arial, Helvetica, sans-serif;
    }

    .dx a:hover {
        color: #0063ce;
    }

    .button button {
        width: 360px;
        height: 50px;
        border-radius: 10px;
        margin-top: 16px;
        border-style: none;
        background-color: #CA141D;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bolder;
        color: #fff;
        font-size: 18px;
    }

    .button button:hover {
        cursor: pointer;
    }

    /* .zc {
        text-align: center;
    } */

    .zc a {
        margin-right: 20px;
        color: #007DFF;
        font-size: 16px;
        text-decoration: none;
        font-family: Arial, Helvetica, sans-serif;
    }

    .zc a:hover {
        color: #0063ce;
    }

    .zc>a em {
        margin-left: 10px;
        border: 1px solid #e4e4e4;
        border-left-style: none;
    }

    .zc-1 a {
        margin-left: 60px;
        margin-right: 0px;
    }

    .zc-2 a {
        margin-left: -10px;
        margin-right: -10px;
    }

    .zc-3 a {
        margin-left: 0px;
        margin-right: 60px;
    }

    .span {
        position: absolute;
        left: 785px;
        top: 265px;
        height: 250px;
        border: 1px solid #e4e4e4;
        border-left-style: none;
    }

    .foot div:nth-child(1) {
        font-size: 15px;
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
        color: #383838;
    }

    .foot div:nth-child(2) {
        text-align: center;
        margin-top: 10px;
        font-size: 13px;
        font-family: Arial, Helvetica, sans-serif;
        color: #a3a3a3;
    }
</style>

<script src="js.js"></script>